import React, { useCallback, useState } from 'react'
import { View, Text } from '@tarojs/components'
import { AtTabBar, AtNavBar } from 'taro-ui'
import { useReady } from '@tarojs/taro'

import cookbook from '../../assets/images/cookbook.png'
import cookbookActive from '../../assets/images/cookbook-active.png'
import menu from '../../assets/images/menu.png'
import menuActive from '../../assets/images/menu-active.png'
import more from '../../assets/images/more.png'
import moreActive from '../../assets/images/more-active.png'

import './index.scss'

// import set_title from '../../multiplatform/title/set_title'

import Cookbook from './cookbook/cookbook'
import Category from './category/category'
import More from './more/more'

import MainComponent from './main-component'

const components = [ Cookbook, Category, More ]

export default function index() {

  const [current, setCurrent] = useState(0)

  const handleClick = useCallback(
    (index) => {
      setCurrent(index)
    },
    [],
  )

  useReady(() => {
    // set_title('美食大全')
  }) 

  return (
    <View>
      {
        process.env.TARO_ENV === 'h5' && (
          <AtNavBar
            title='美食大全'
            className="title"
            color="#fff"
          ></AtNavBar>
        )
      }
      <View className="main">
        <MainComponent
          is={components[current]}
          title="hello"
        ></MainComponent>
      </View>
      <AtTabBar
        fixed
        color="#666"
        selectedColor="#000"
        fontSize={12}
        tabList={[
          { 
            title: '美食大全', 
            image: cookbook, 
            selectedImage: cookbookActive
          },
          { title: '分类', 
            image: menu,
            selectedImage: menuActive
          },
          { 
            title: '更多', 
            image: more,
            selectedImage: moreActive
          }
        ]}
        onClick={handleClick}
        current={current}
      />
    </View>
  )
}
